<template>
    <div>
        <el-divider content-position="center">主题</el-divider>

        <div class="row">
            <span class="row-label">自定义主题</span>
            <div class="themeAction">
                <Theme/>
            </div>
        </div>
        <div class="row">
            <span class="row-label">暗黑模式</span>
            <div class="themeAction">
                <Dark type="switch"/>
            </div>
        </div>
        <div class="row">
            <span class="row-label">灰色模式</span>
            <div class="themeAction">
                <el-switch v-model="SettingStore.gray" size="large" inline-prompt @change="changeGray" />
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import Dark from "@/components/Action/dark/index.vue"
import Theme from "@/components/Action/theme/index.vue"
import { useSetting } from '@/pinia/index'

const SettingStore = useSetting()

// 自定义主题色
const changeTheme = (color: string, v: string) => {
    SettingStore.setTheme(color)
}

const toggle = SettingStore.setDark()

const changeGray = (val:boolean) => {
    SettingStore.setGray(val)
}

</script>

<style lang="less" scoped>
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.row {
    display: flex;
    justify-content: center;

    .row-label {
        width: 40%;
        align-items: right;
        .flex-center();
        justify-content: flex-end;
    }

    .themeAction {
        width: 60%;
        align-items: center;
        .flex-center();
    }
}

.row+.row {
    margin-top: 20px;
}
</style>